<template>
  <div class="main">
    <div style="width: 30%; height: 400px">
      <el-card>
        <div>
          <el-icon style="color: #40c9c6">
            <grid />
          </el-icon>
        </div>
        <div>
          <div style="color: #8c8c8c">商品数量</div>
          <div>
            <b style="color: #666666">{{ data.goodsCount }}</b>
          </div>
        </div>
      </el-card>
      <el-card>
        <div>
          <el-icon style="color: #36a3f7">
            <chat-dot-square />
          </el-icon>
        </div>
        <div>
          <div style="color: #8c8c8c">商品数量</div>
          <div>
            <b style="color: #666666">{{ data.waitStockCount }}</b>
          </div>
        </div>
      </el-card>
    </div>
    <div
      id="columnar"
      style="width: 65%; height: 400px; margin-top: 30px"
    ></div>
    <div id="broken" style="width: 33%; height: 400px; margin-left: 45px"></div>
    <div id="region" style="width: 31%; height: 400px"></div>
    <div id="channel" style="width: 31%; height: 400px"></div>
  </div>
</template>

<script>
  import { Grid, ChatDotSquare } from "@element-plus/icons-vue";
  import http from "@/http";
  import * as echarts from "echarts";
  export default {
    components: {
      Grid,
      ChatDotSquare,
    },
    created() {
      this.initHome();
    },
    data() {
      return {
        data: "",
      };
    },
    methods: {
      initHome() {
        let data = {
          _gp: "admin.dashboard",
          _mt: "integral",
        };
        http.get(data).then((res) => {
          this.data = res.data;
          if (this.data) {
            this.one();
            this.two();
            this.three();
            this.fiver();
          }
        });
      },
      //七日订单
      one() {
        let myChart = echarts.init(document.getElementById("columnar"));
        let option;
        option = {
          legend: {
            data: ["订单数"],
          },
          title: {
            text: "7日订单",
            subtext: "订单数",
          },
          xAxis: {
            type: "category",
            data: this.data.daysOrder[0],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "订单数",
              data: this.data.daysOrder[1],
              type: "bar",
              color: "#00C7FF",
              barWidth: 30,
            },
          ],
        };
        option && myChart.setOption(option);
      },
      //七日成交额
      two() {
        let myChart = echarts.init(document.getElementById("broken"));
        let option;
        option = {
          legend: {
            data: ["订单数"],
          },
          title: {
            text: "7日成交金额",
            subtext: "订单数",
          },
          xAxis: {
            type: "category",
            data: this.data.daysSum[0],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "订单数",
              data: this.data.daysSum[1],
              type: "line",
              color: "#20B2AA",
            },
          ],
        };

        option && myChart.setOption(option);
      },
      //订单地区分布
      three() {
        let myChart = echarts.init(document.getElementById("region"));
        let option;

        option = {
          title: {
            text: "订单地区分布",
          },
          legend: {
            data: ["地区分布"],
          },
          series: [
            {
              name: "地区分布",
              type: "pie",
              radius: "50%",
              data: this.data.area,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);
      },
      //订单渠道分布
      fiver() {
        let myChart = echarts.init(document.getElementById("channel"));
        let option;

        option = {
          title: {
            text: "订单渠道分布",
          },
          series: [
            {
              name: "地区分布",
              type: "pie",
              radius: "50%",
              data: this.data.channel,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        };

        option && myChart.setOption(option);
      },
    },
  };
</script>

<style lang="less" scoped>
  .main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background: #f0f2f5;
    .el-card {
      margin: 50px;
      width: 300px;
      & /deep/.el-card__body {
        display: flex;
        justify-content: space-between;
      }
      .el-icon {
        font-size: 50px;
      }
    }
  }
</style>
